<!--
 * @Author: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @Date: 2024-07-23 16:17:07
 * @LastEditors: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @LastEditTime: 2024-07-23 18:44:25
 * @FilePath: \za-workbench-main\src\views\test\components\commonForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-form">
    <el-form
    ref="ruleFormRef"
    class="demo-form-inline"
    :model="initData"
    :rules="rules"
    :size="props.formSize"
    status-icon
    :inline="props.inline"
    :label-width="props.labelWidth"
  >
  <template v-for="item in props.formOptions" :key="item.prop">
    <slot v-if="item.slotName" :name="item.slotName" />
    <el-form-item v-else-if="item.type==='input'" :label="item.label" :label-width="item.width" :prop="item.field">
      <el-input  v-model="initData[item.field]" />
    </el-form-item>
    <el-form-item v-else-if="item.type==='select'" :label="item.label" :label-width="item.width" :prop="item.field">
      <el-select
        v-model="initData[item.field]"
        placeholder="Activity zone"
        clearable
      >
      <el-option
        v-for="(enumItem, index) in Object.entries(item.enums)"
        :key="index"
        :value="enumItem[0]"
        :label="enumItem[1]"
        allowClear
      >
        {{ enumItem[1] }}
      </el-option>

      </el-select>
    </el-form-item>
  </template>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import type { PropType } from 'vue'
type formOptionsItem = {
  type:string,
  slotName?:string,
  label:string,
  field:string|number,
  width?:string|number,
  children?:Array<any>,
  [key:string]:any
}
const props = defineProps({
  ruleForm:{
    type:Object as PropType<any>
  },
  formSize:{
    type:String,
    default:'default'
  },
  formOptions:{
    type:Array<formOptionsItem>
  },
  ruleConfig:{
    type:Object as PropType<any>
  },
  inline:{
    type:Boolean,
    default:true
  },
  labelWidth:{
    type:String,
    default:'150px'
  }
})
const  initData = reactive(props.ruleForm)
const rules:any = computed(()=>{
 return props.ruleConfig
})
const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log('ruleFormRef',initData,props.ruleForm)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  console.log('ruleFormRef---',initData,props.ruleForm)
}

</script>
<style lang="scss" scoped>
:deep(.elp-form-item--default .elp-form-item__content){
  width:214px !important;
}
</style>
